<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin:0;padding:0;text-decoration:none;list-style:none;}
			#box{height:100%;width:0;position:fixed;right:0;top:0;background:pink;}
		
			.wrap{height:100%;width:0;border-left:6px solid #7a6e6e;position:absolute;right:0;top:0;}
			
			.tab{position:absolute;right:-6px;top:50%;width:35px;}

		
			.tab div{width:35px;height:35px;margin-bottom:1px;position:relative;cursor:pointer;border-radius:3px 0 0 3px;background-color:rgb(122,110,110);}

			i{width:35px;height:35px;position:relative;display:inline-block;background:url(toolbars.png) no-repeat;}
					
			span{font-size:12px;position:absolute;left:35px;width:62px;height:35px;border-radius:3px 0 0 3px;text-align:center;line-height:35px;background-color:rgb(122,110,110);color:#fff}	
			
			.vip-div i{background-position:-88px -175px;}
			.shopping-div i{background-position:-50px 0;}
			.follow-div i{background-position:-50px -50px;}
			.history-div i{background-position:-50px -100px;}
			.message-div i{background-position:-190px -150px;}
			.mast-div i{background-position:-50px -150px;}
			
			.right-wrap{width:270px;height:100%;position:absolute;left:0;top:0;background:#eee;}
			
			
		</style>
		<script src="jquery.js"></script>
		<script type="text/javascript">
		(function(){
			$(function(){
				$(".tab div").mouseover(function(){
					$("span").eq($(this).index()).stop().animate({'left':-60});
					$('span').eq($(this).index()).css("backgroundColor","#c81623");
					$('i').eq($(this).index()).css("backgroundColor","#c81623");
				})
				
				$(".tab div").mouseout(function(){
					$("span").eq($(this).index()).stop().animate({'left':35});
					$('span').eq($(this).index()).css("backgroundColor","rgb(122,110,110)");
					$('i').eq($(this).index()).css("backgroundColor","rgb(122,110,110)");
				})
				$(".shopping-div").click(function(){
					$(".wrap").stop().css("right",270);
					
					$(".shopping-div").click(function(){
						$(".wrap").stop().css("right",0);
					})
				})
				
			})	
		})(jQuery);
			
		</script>
	</head>
	<body>	
	<div id="box">
		<div class="wrap">
			<div class="tab">
				<div class="vip-div">
					<span class="vip-txt">京东会员</span>
					<i class="tab-vip"></i>
				</div>
				<div class="shopping-div">
					<span class="shop-txt">购物车</span>
					<i class="tab-shop"></i>
				</div>
				<div class="follow-div">
					<span class="follow-txt">我的关注</span>
					<i class="tab-follow"></i>
				</div>
				<div class="history-div">
					<span class="history-txt">我的足迹</span>
					<i class="tab-history"></i>
				</div>
				<div class="message-div">
					<span >我的消息</span>
					<i></i>
				</div>
				<div class="mast-div">
					<span >资讯JIMI</span>
					<i></i>
				</div>
			</div>
			<div class="sub">
				<div class="sub-top">
					<span ></span>
					<i>顶部</i>
				</div>
				<div class="sub-bottom">
					<span ></span>
					<i>反馈</i>
				</div>
			</div>
			<div class="right-wrap">
				<div class="rw-shopping"></div>
				<div class="rw-history"></div>
			</div>
		</div>
	</div>
	</body>
</html>